 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务门户页面</title>
    <script src="../../js/header.js"></script>
    <link rel="stylesheet" type="text/css" href="../../css/main.css">
    <style>
    	.el-tooltip__popper {
	  		max-width: 800px;		
		}
    </style>
</head>
<body>
    <div v-cloak id="firstpage" style="overflow: auto;" ref="syHeight">
        <el-row type="flex" justify="center" style="margin-top: 25px;">
            <el-col :span="15">
                <el-row v-show="!showSearchContent">
                    <el-col>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item class="crumb-to" @click.native="recoverySy()">首页</el-breadcrumb-item>
                            <el-breadcrumb-item v-for="item in breadcrumb">{{ item.crumbname }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                </el-row>
                <el-row :gutter="20" :style="{ 'marginTop': !showSearchContent?'20px':'' }">
                    <el-col :span="span1">
                        <div style="padding: 9px 9px 0;background: rgba(48, 119, 201,0.52);">
                            <div class="search-tab">
                                <el-tabs v-model="searchTitle"  @tab-click="changeIsPublic">
                                    <el-tab-pane label="公开公告" name="gonggao"></el-tab-pane>
                                    <el-tab-pane label="标准规范" name="biaozhun"></el-tab-pane>
                                </el-tabs>
                            </div>
                            <div class="search-input">
                                <el-input
                                    placeholder="请输入标题"
                                    suffix-icon="el-icon-search"
                                    @keyup.enter.native="submitSearch"
                                    v-model="inputsearch" />
                            </div>
                            <div style="width: 100%;height: 5px;background-image: linear-gradient(-55deg, #4BA3EB 0%, #1665A7 100%);"></div>
                        </div>
                    </el-col>
                    <el-col :span="span2" v-show="showSearchContent">
                        <img src="../../images/tousu.png" class="img-tousu" style="cursor:pointer;" @click="openComplaints" />
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <div
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-row v-show="showSearchContent" type="flex" justify="center" style="margin-top: 20px;">
                <el-col :span="15">
                    <el-row :gutter="20">                        
                        <el-col :span="12">
                            <el-row>
                                <el-col class="notice_information">
                                    <el-tabs v-model="noticeName" @tab-click="changeBz">
                                        <el-tab-pane v-for="item in noticeInformation" :label="item.titlename" :name="item.name">
                                            <div id="publicList" style="display: block;height: 278px;overflow: hidden">
                                                <ul class="information_contents">
                                                    <div v-if="item.child!=null && item.child.length>0">
                                                        <li v-for="list in item.child" @click="view(list)">
                                                            <span class="contents">{{ list.title }}</span>
                                                            <span class="date">{{ list.condate }}</span>
                                                        </li>
                                                    </div>
                                                    <div v-else style="color: #8c939d;line-height: 282px;text-align: center;">
                                                        暂无数据
                                                    </div>
                                                </ul>
                                            </div>
                                        </el-tab-pane>
                                    </el-tabs>
                                    <div v-show="showPublic" class="column_more" style="position: absolute;top: 7px;right: 3px;">
                                        <el-link @click="toPublic()" target="_blank">更多</el-link>
                                    </div>
                                    <div v-show="showStandard" class="column_more" style="position: absolute;top: 7px;right: 3px;">
                                        <el-link @click="toStandard()" target="_blank">更多</el-link>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="12">
                            <el-row>
                                <el-col :span="5">
                                    <div class="column_title column_short_title" style="padding: 5px 0;text-align: center;">
                                        统计分析
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <div style="position: relative;bottom: 1px;border-bottom: 1px solid #D6D6D6;"></div>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top: 17px;background: #FFFFFF;border: 1px solid #D6D6D6;">
                                <el-col>
                                    <div id="echarts3" style="width: 90%;height:250px;"></div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-row v-show="showSearchContent" type="flex" justify="center" style="margin-top: 5px;">
                <el-col :span="15">
                    <el-row>
                        <el-col :span="3">
                            <div class="column_title column_long_title" style="padding: 5px 0;text-align: center;">
                                公众交流人物
                            </div>
                        </el-col>
                        <!--<el-col :span="6" :offset="15" style="line-height: 30px;">
                            <div class="column_more">
                                <span>更多</span>
                            </div>
                        </el-col>-->
                    </el-row>
                    <el-row>
                        <el-col>
                            <div style="position: relative;bottom: 1px;border-bottom: 1px solid #D6D6D6;"></div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-top: 17px;">
                        <el-col :span="6">
                            <img :src="publiccontact.img1" class="img-wh" style="cursor: pointer;" @click="changeUrl(0)" @mouseenter="changeImg(0)" @mouseleave="recovery(0)" />
                        </el-col>
                        <el-col :span="6">
                            <el-badge :value="num" :max="99" class="item">
                                <img :src="publiccontact.img2" class="img-wh" style="cursor: pointer;" @click="changeUrl(1)" @mouseenter="changeImg(1)" @mouseleave="recovery(1)" />
                            </el-badge>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

            <!-- 搜索内容列表 -->
            <!--搜索前提示-->
            <el-row v-show="!showSearchContent && !searchContents" type="flex" justify="center" ref="searchHeight" style="margin-top: 20px;">
                <el-col :span="15" style="margin: 20px 0;">
                    <span style="font-size: 15px;color:#666;">请按"回车"键发起检索</span>
                </el-col>
            </el-row>
            <!--查询列表-->
            <el-row v-show="!showSearchContent && searchContents" type="flex" justify="center" ref="searchHeight" style="margin-top: 20px;">
                <el-col :span="15">
                    <el-table :data="tableData" border style="width: 100%;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                        <el-table-column type="selection" ></el-table-column>
                        <el-table-column
                                prop=""
                                type="index"
                                label="序号"
                                width="80"
                                align="center" >
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="标题"
                                show-overflow-tooltip
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="releaseTime"
                                label="发布时间"
                                width="100"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="200"
                                align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="view(scope.row)">查看详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="overflow: hidden;">
                        <div class="pagination">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :page-size="pagesize"
                                    :current-page="currentPage"
                                    :page-sizes="[10]"
                                    background
                                    layout="total, sizes,prev, pager, next"
                                    :total="tableTotal"
                                    prev-text="上一页"
                                    next-text="下一页">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <!--详情-->
            <el-dialog title="" :visible.sync="dialogView" center fullscreen>
                <gongshi-details :addform="addForm" :link="link"></gongshi-details>
            </el-dialog>

            <!-- 投诉举报--安评单位举报 -->
            <el-dialog title="" :visible.sync="dialogApComplaintView" center fullscreen>
                <div id="#apcomplaint">
                    <el-row>
                        <el-col>
                            <div style="margin: 20px auto 64px;text-align: center;">
                                <span class="complaint-title">投诉处理单位请优先选择省级地震单位电话进行咨询和投诉</span>
                            </div>
                        </el-col>
                        <el-col>
                            <div class="phone-wrap">
                                <el-table
                                        :data="phoneList">
                                    <el-table-column
                                            align="left">
                                        <template slot-scope="scope">
                                            <span>{{ scope.row.phone1.department }}</span>：
                                            <span>{{ scope.row.phone1.phonenum }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            align="left">
                                        <template slot-scope="scope">
                                            <span>{{ scope.row.phone2.department }}</span>：
                                            <span>{{ scope.row.phone2.phonenum }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            align="left">
                                        <template slot-scope="scope">
                                            <span>{{ scope.row.phone3.department }}</span>：
                                            <span>{{ scope.row.phone3.phonenum }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            align="left">
                                        <template slot-scope="scope">
                                            <span>{{ scope.row.phone4.department }}</span>：
                                            <span>{{ scope.row.phone4.phonenum }}</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-dialog>

            <!-- 投诉举报--外国人实名举报 -->
            <!--<el-dialog title="" :visible.sync="dialogWgrComplaintView" center fullscreen>
                <wgr-complaint></wgr-complaint>
            </el-dialog>-->
        </div>
    </div>
</body>
<script>
    var firstpage = new Vue({
        el: '#firstpage',
        data(){
            return{
                span1: '18',
                span2: '6',
                isPublic:'0',
                num:0,
                name:'',
                breadcrumb: [
                    { crumbname: '信息查询' }
                ],
                showSearchContent: true,
                searchContents: false,
                noticeName: 'gongshi',
                searchTitle: 'gonggao',
                loading: false,
                tableData: [],
                tableTotal: '',
                pagesize: 10,
                currentPage: 1,
                inputsearch: '',
                // 详情
                dialogView: false,
                dialogApComplaintView: false,
                addForm: [],
                link: '',
                showPublic:true,
                showStandard:false,
                noticeInformation: [
                    {
                        titlename: '公示通报',
                        name: 'gongshi',
                        child: []
                    },
                    {
                        titlename: '标准规范',
                        name: 'biaozhun',
                        child: []
                    }
                ],
                publiccontact: {
                    img1: appBaseUrl +"/images/danwei.png",
                    img2: appBaseUrl + "/images/xiaoxi.png"
                },
                /* 投诉举报部分 */
                // 安评单位举报电话
                phoneList: [
                    {
                        phone1:{
                            department: '北京局',
                            phonenum: '1234567890'
                        },
                        phone2: {
                            department: '河北局',
                            phonenum: '1234567890'
                        },
                        phone3: {
                            department: '河南局',
                            phonenum: '1234567890'
                        },
                        phone4: {
                            department: '山东局',
                            phonenum: '1234567890'
                        }
                    },
                    {
                        phone1:{
                            department: '黑龙江局',
                            phonenum: '1234567890'
                        },
                        phone2: {
                            department: '河北局',
                            phonenum: '1234567890'
                        },
                        phone3: {
                            department: '河南局',
                            phonenum: '1234567890'
                        },
                        phone4: {
                            department: '山东局',
                            phonenum: '1234567890'
                        }
                    },
                    {
                        phone1:{
                            department: '北京局',
                            phonenum: '1234567890'
                        },
                        phone2: {
                            department: '内蒙古局',
                            phonenum: '1234567890'
                        },
                        phone3: {
                            department: '黑龙江局',
                            phonenum: '1234567890'
                        },
                        phone4: {
                            department: '山东局',
                            phonenum: '1234567890'
                        }
                    },
                    {
                        phone1:{
                            department: '北京局',
                            phonenum: '1234567890'
                        },
                        phone2: {
                            department: '河北局',
                            phonenum: '1234567890'
                        },
                        phone3: {
                            department: '河南局',
                            phonenum: '1234567890'
                        },
                        phone4: {
                            department: '山东局',
                            phonenum: '1234567890'
                        }
                    }
                ],
                city: {
                    cityName: '',
                    cityNum: 212312,
                    cityObject: 12332, // 监管对象数据
                    cityAction: 3242, // 监管行为数据
                    cityEducation: 123, // 宣传教育数据
                    cityCounts:0,
                    cityTotal:0,
                },
                fileYear: '',
            }
        },
        created(){
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            if(userInfo!=null){
                this.name = userInfo.loginName;
            }

            let date=new Date();
            let year=date.getFullYear().toString();
            this.fileYear=year;
        },
        mounted(){
            this.mapFn();
            this.getPublic();
            this.getnum();
        },
        watch: {
            inputsearch(val){
                if(val != ''){
                    this.span1 = 24;
                    this.span2 = 0;
                    this.showSearchContent = false;
                }else{
                    this.searchContents = false;
                    this.recoverySy();
                }
            },
            searchTitle(){
                this.searchContents = false;
            },
        },
        methods: {
            getnum(){
                axios({
                    method: 'get',
                    url: appBaseUrl +'/message/getMessageCount',
                }).then(response => {
                    let data = response.data;
                    if (data.code == 200) {
                        var numb = response.data.data;// 数据长度
                        this.num=numb;
                    } else {
                        this.$message.error(data.msg);
                    }
                })
            },
            /*公示通报和标准规范切换*/
            changeBz(tab, event){
                if(this.noticeName=="gongshi"){
                    this.showPublic=true;
                    this.showStandard=false;
                    this.getPublic();
                }else if(this.noticeName=="biaozhun"){
                    this.showPublic=false;
                    this.showStandard=true;
                    this.getStandard();
                }
            },
            /*标准规范和公式查询切换*/
            changeIsPublic(tab, event){
                if(this.searchTitle=="gonggao"){
                    this.isPublic='0';
                }else if(this.searchTitle=="biaozhun"){
                    this.isPublic='1';
                }
            },
            mapFn() {
                var dataList;
                var myChart = echarts.init(document.getElementById('echarts3'));
                var $this = this;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/checkaction/map',
                    params:{
                        year:$this.fileYear
                    }
                }).then(response => {
                    let data = response.data;
                if (data.code == 200) {
                    dataList = JSON.parse(data.data);
                    $this.city.cityTotal = JSON.parse(data.cityTotal);
                    $this.city.cityNum=JSON.parse(data.cityTotal);
                    myChart.setOption({
                        tooltip: {
                            formatter: function(params) {
                                if (params.value) {
                                    return params.seriesName + '<br/>' + params.name + ' : ' + params.value;
                                } else {
                                    return params.seriesName + '<br/>' + params.name + ' : ' + '0';
                                }
                            } //数据格式化
                        },
                        visualMap: {
                            min: 0,
                            max: 1500,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'], //取值范围的文字
                            inRange: {
                                color: ['#e0ffff', '#006edd'] //取值范围的颜色
                            },
                            show: false //图注
                        },
                        geo: {
                            map: 'china',
                            roam: false, //不开启缩放和平移
                            zoom: 1.2, //视角缩放比例
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: '10',
                                    color: 'rgba(0,0,0,0.7)'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(0, 0, 0, 0.2)'
                                },
                                emphasis: {
                                    areaColor: '#F3B329', //鼠标选择区域颜色
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0,
                                    shadowBlur: 20,
                                    borderWidth: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        },
                        series: [{
                            name: '信息量',
                            type: 'map',
                            geoIndex: 0,
                            data: dataList
                        }]
                    });
                } else {
                    this.$message.error(data.msg);
                }
            }).catch(function(error) {
                    console.log(error);
                });
                window.onresize = () => {
                    myChart.resize();
                }
                // 地图点击事件
                myChart.on('click', function(params) {
                    console.log(params);
                    $this.city.cityName = params.name;
                    if(params.value){
                        $this.city.cityCounts = params.value;
                    }else{
                        $this.city.cityCounts = 0;
                    }
                    parent.vue.openDialog('dialogTableVisible',$this.city);
                });
            },
            changeImg(index) {
                if (index == 0) {
                    this.publiccontact.img1 = appBaseUrl + "/images/danwei-on.png";
                } else {
                    this.publiccontact.img2 = appBaseUrl + "/images/xiaoxi-on.png";
                }
            },
            recovery(index) {
                if (index == 0) {
                    this.publiccontact.img1 = appBaseUrl + "/images/danwei.png";
                } else {
                    this.publiccontact.img2 = appBaseUrl + "/images/xiaoxi.png";
                }
            },
            changeUrl(index) {
                if (index == 0) {
                        axios({
                            method: 'post',
                            url: appBaseUrl + '/login/doYkLogin',
                        }).then(response => {
                            let data = response.data;
                        if (data.code == 200) {
                            debugger;
                            //localStorage.setItem("userInfo", JSON.stringify(data.data));
                            window.open(apURL);
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                    /*parent.vue.changePage('./dwrk/unitEntrance.html');*/
                } else {
                    parent.vue.changePage('html/main/xiaoxi/xiaoxi.html');
                }
            },
            openComplaints(){
                parent.vue.openDialog();
            },
            openComplaintDialog(n){
                if(n=='ap'){
                    this.dialogApComplaintView = true;
                }else{
                    parent.vue.changePage('html/main/complaint/complaint.html');
                }
            },
            // 加载
            loadingTime(){
                this.loading = true;
            },
            // 恢复首页
            recoverySy(){
                this.loadingTime();
                this.span1 = 18;
                this.span2 = 6;
                this.showSearchContent = true;
                var $this = this;
                setTimeout(function(){
                    $this.loading = false;
                },1000)
                parent.vue.recoveryIframeHeight();
                if(this.inputsearch != ''){
                    this.inputsearch = '';
                }
            },
            // 信息查询--按标题
            submitSearch(){
                var pagesize = this.pagesize;
                var pageno = this.currentPage;
                var title = this.inputsearch;
//              this.loadingTime();

                this.searchContents = true;
                parent.vue.setIframeHeight(825);

                axios({
                    method: 'get',
                    url: appBaseUrl + '/promulgate/titleList',
                    params: {
                        pageSize: pagesize,
                        pageNo: pageno,
                        title: title,
                        publicType:'0',
                        isPublic:this.isPublic
                    }
                })
                .then(response => {
                    let data = response.data;
                    if (data.code == 200) {
                        let dataInformation = response.data.data.results;
                        this.tableTotal = response.data.data.total;// 数据长度
                        this.loading = false; // 停止加载

                        this.tableData = dataInformation;
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            //查看
            view(row){
                this.dialogView=true;
                this.link=appBaseUrl + "/html/upload/annex.html?uuid="+row.id+"&flag=0&from="+row.from;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/promulgate/selectOne',
                    params: {
                        id: row.id,
                        from:row.from,
                    }
                })
                .then(response => {
                    let data = response.data;
                    if (data.code == 200) {
                        let rowdata = response.data.data;
                        this.addForm = rowdata;
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            //每页下拉显示数据
            handleSizeChange(size) {
                this.pagesize = size;
                this.submitSearch();
            },
            //点击第几页
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.submitSearch();
            },
            //公示通报
            toPublic(){
            	parent.vue.setIframeHeight(600);
                parent.vue.changePage(appBaseUrl + "/html/main/public/public.html");
            },
            getPublic(){
                var pagesize =8;
                var pageno = 1;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/promulgate/allList',
                    params: {
                        pageSize: pagesize,
                        pageNo: pageno,
                        publicType:'0',
                        isPublic:'0',
                    }
                })
                .then(response => {
                    let data = response.data;
                    if (data.code == 200) {
                        let dataInformation = response.data.data.results;
                        this.noticeInformation[0].child=dataInformation;
                        if (dataInformation.length==0){
                            document.getElementById("publicList").style.display="none";
                            document.getElementById("publicNo").style.display="block";
                        }
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            //标准规范
            toStandard(){
            	parent.vue.setIframeHeight(600);
                parent.vue.changePage(appBaseUrl + "/html/main/standard/standard.html");
            },
            getStandard(){
                var pagesize =10;
                var pageno = 1;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/promulgate/allList',
                    params: {
                        pageSize: pagesize,
                        pageNo: pageno,
                        publicType:'0',
                        isPublic:'1',
                    }
                })
                    .then(response => {
                        let data = response.data;
                        if (data.code == 200) {
                            let dataInformation = response.data.data.results;
                            this.noticeInformation[1].child=dataInformation;
                            if (dataInformation.length==0){
                                document.getElementById("publicList").style.display="none";
                                document.getElementById("publicNo").style.display="block";
                            }
                        } else {
                            this.$message.error(data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        }
    })
</script>
</html>